<div class="toolbar">
  <div>
    用户管理
  </div>
  <button mat-raised-button color="primary" (click)="open_dialog()">新建用户</button>
</div>
<div class="table">
  <table mat-table [dataSource]="user_srv.user_list().list" class="mat-elevation-z8">
    <ng-container matColumnDef="username">
      <th mat-header-cell *matHeaderCellDef>username</th>
      <td mat-cell *matCellDef="let element"> {{ element.username }}</td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>status</th>
      <td mat-cell *matCellDef="let element"> {{ element.status.label }}</td>
    </ng-container>

    <ng-container matColumnDef="role">
      <th mat-header-cell *matHeaderCellDef>role</th>
      <td mat-cell *matCellDef="let element"> {{ element.role.label }}</td>
    </ng-container>

    <ng-container matColumnDef="privileges">
      <th mat-header-cell *matHeaderCellDef>privileges</th>
      <td mat-cell *matCellDef="let element"> {{ _parsePrivileges(element.privileges) }}</td>
    </ng-container>

    <ng-container matColumnDef="operation">
      <th mat-header-cell *matHeaderCellDef>operation</th>
      <td mat-cell *matCellDef="let element" style="padding-left: 4px !important;">
        <button mat-icon-button (click)="update_user(element)">
          <mat-icon color="primary">tune</mat-icon>
        </button>
        <button mat-icon-button (click)="delete_user(element)" color="warn">
          <mat-icon color="secondary">delete</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>
<div class="pager">
  <mat-paginator [length]="user_srv.user_list().total"
                 [pageSize]="user_srv.user_list().size"
                 [pageSizeOptions]="[5, 10, 25, 100]"
                 (page)="handlePager($event)"
                 aria-label="Select page">
  </mat-paginator>
</div>
